body {
  width: 100%;
  height: auto;
  min-height: 100vh;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* 头部导航 */
nav {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  background-color: rgb(236, 236, 236);
  font-size: 14px;
  color: #005d6c;
}
nav > div {
  width: 60vw;
  min-width: 1000px;
  margin: 0 auto;
  height: auto;
}

nav .left ul,
nav .right ul {
  height: 40px;
  line-height: 40px;
  display: flex;
}
nav a {
  margin: 0 15px;
}
nav .left {
  float: left;
}
nav .right {
  float: right;
}
nav .right li:nth-child(9) span {
  background: url("../pic/index/zh-en.jpg") no-repeat;
  display: inline-block;
  position: relative;
  left: 5px;
  height: 10px;
  width: 20px;
  z-index: 2;
}
nav .right li:last-child a {
  background: url("../pic/index/search.png") no-repeat;
  display: inline-block;
  z-index: 2;
  height: 20px;
  width: 20px;
  position: relative;
  top: 6px;
}

/* logo */
.logo {
  width: 100%;
  background-image: url("../pic/index/top_bg.jpg");
  background-position: center;
  height: 122px;
}
.logo > div {
  width: 60%;
  min-width: 1000px;
  margin: auto;
}
.logo a img {
  height: 90px;
  width: 280px;
  margin-top: 18px;
}

/* 菜单 */
#menu-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 40px;
}
#menu {
  width: 100%;
  height: 40px;
  background-image: url("../pic/index/hw1.png");
  background-position: center;
}
#menu .nav {
  height: 40px;
  width: 60vw;
  min-width: 1000px;
  margin: 0 auto;
  padding-left: 280px;
  line-height: 40px;
  background: url("../pic/index/hw_zxdj.png") left top no-repeat;
}
#menu .nav li {
  text-align: center;
  display: inline;
  float: left;
  width: 16.6%;
  min-width: 90px;
  color: rgb(255, 255, 255);
  font-size: 18px;
}
#menu .nav li a {
  display: block;
  height: 40px;
}
#menu .nav li a:hover,
.active {
  background: url("../pic/index/top.png") no-repeat bottom center;
}
#menu .nav {
  position: relative;
}
#menu #ship {
  width: 140px;
  height: 65px;
  position: absolute;
  left: 255px;
  top: -65px;
  transition: 1.5s;
}
/* 二级菜单 */
#inside-menu:hover,
#menu .nav:hover + div {
  transform: scaleY(1);
}
#inside-menu {
  width: 100%;
  position: relative;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: 0.4s;
  background-color: white;
}
.inside-right {
  color: #b0b0b0;
  font-size: 14px;
  line-height: 30px;
  width: 60vw;
  height: 320px;
  min-width: 1000px;
  margin: 0 auto;
  padding-left: 280px;
  text-align: center;
  position: relative;
  background: url("../pic/index/nav-left.png") no-repeat right bottom;
}
.bg-color {
  height: 320px;
  width: 20vw;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgb(152, 212, 222);
}
@media (min-width: 1670px) {
  .img {
    width: calc(20vw + 280px);
    right: calc(60vw - 280px);
  }
}
@media (max-width: 1670px) {
  .img {
    width: 280px;
    left: 0px;
  }
}
.img {
  text-align: right;
  position: absolute;
  height: 320px;
  top: 0px;
  padding-top: 50px;
  padding-right: 50px;
  background-color: rgb(152, 212, 222);
  background-image: url("../pic/index/bs.png");
}
.inside-right ul {
  float: left;
  width: 16.6%;
  height: 100%;
}

#inside-menu .inside-right ul:hover,
#inside-menu .ul-on {
  height: 100%;
  background-color: rgb(232, 241, 241);
  font-size: 0.9rem;
  color: black;
  line-height: 34px;
  font-size: 16px;
}

#inside-menu .inside-right li:hover {
  color: #1a7988;
  cursor: pointer;
}

/* 主要内容 */
main {
  flex-grow: 1;
  min-width: 1000px;
  margin: 20px 0 20px;
}
.table {
  width: 60vw;
  min-width: 1000px;
  margin: 0 auto;
  text-align: center;
  border: solid #005d6c 1px;
  border-collapse: collapse;
}
.table td,
.table th {
  height: 40px;
  border-left: solid rgba(60, 177, 195, 0.5) 1px;
}
.table td:first-child,
.table th:first-child {
  border-left: none;
}
.table tr {
  border-bottom: solid rgba(60, 177, 195, 0.5) 1px;
}
.table tbody tr:last-child {
  border-bottom: none;
}

#selects {
  margin:0 auto;
  min-width: 1000px;
  line-height: 28px;
}

/* 底部 */
footer#footer {
  height: 300px;
  width: 100%;
  background: url("../pic/index/dbg.png") center no-repeat;
  justify-self: flex-end;
}
footer#footer .content {
  width: 60%;
  min-width: 1000px;
  margin: 0 auto;
  color: white;
  font-size: 14px;
}
/* 左侧 */
footer#footer .content .left {
  width: 25%;
  height: 100%;
  margin-top: 60px;
}
footer#footer .content .left ul {
  float: left;
  width: 50%;
  line-height: 36px;
}

/* 中间 */
footer#footer .center {
  width: 50%;
  height: 100%;
  float: left;
}
footer#footer .center > div {
  float: left;
}
/* 中间左边的二维码 */
footer#footer .center .wx {
  width: 42%;
}
footer#footer .center .wx div {
  float: left;
  width: 50%;
  /* margin-top: 60px; */
  text-align: center;
}
footer#footer .center .wx div img {
  width: 85px;
}

/* 中间右边地址邮编等信心 */
footer#footer .center .info {
  width: 58%;
  padding-left: 30px;
}

footer#footer .center .info li:nth-child(n) {
  margin-bottom: 10px;
}

footer#footer .right {
  width: 24%;
  height: 100%;
  display: inline-block;
}
footer#footer .right [title="logo"] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}
footer#footer .right > div a {
  float: right;
  width: 20%;
  margin-left: 10px;
}
footer#footer .right img {
  width: 100%;
}

.user-info .user-icon{
  width: 5rem;
  height: 5rem;
  vertical-align: middle;
  border-radius: 50%;
}
